<template>
  <div class="ccui-app-container">
    <div class="ccui-advanced-search-wrapper ccui-clearfix">
      <div class="ccui-tab-wrapper">
        <el-button
          :type="isFocus === 1 ? 'table-top-active' : 'table-top'"
          size="mini"
          >全部 (1)</el-button
        >
        <!--       {{ totalNum }} -->
      </div>
      <div class="ccui-extend-btn">
        <el-button
          size="mini"
          type="primary"
          ref="listquery-new-item"
          @click="dataAddHandler('open')"
          icon="icon-ccui-add-sup"
          >新增</el-button
        >
        <!--        @click="handleGoNew"-->
      </div>
    </div>
    <!--  表格  -->
    <div class="ccui-multifunctional-table-wrapper">
      <el-table
        ref="multipleTable"
        :data="tableData"
        :fit="true"
        :row-style="rowClass"
        :cell-style="cellStyle"
        border
        class="ccui-multifunctional-table"
        @header-dragend="tableTitleWidth"
        max-height="20000"
        v-if="draggFlag"
      >
        <!--
          @select-all="handleCheckAllChange"
          @select="handleCheckChange"
          @selection-change="handleSelectionChange"
          @sort-change="sortChange"
        -->
        <template v-for="(table, index) in tableTheadOptions">
          <el-table-column
            v-if="table.checked"
            :fixed="table.fixed || false"
            :key="index"
            :type="table.type"
            :label="table.label"
            :align="table.align || 'left'"
            :header-align="table.headerAlign || 'left'"
            :min-width="table.width"
            :prop="table.prop"
            :show-overflow-tooltip="true"
            border="true"
          >
          </el-table-column>
        </template>
        <el-table-column label="操作" width="127" fixed="right">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              ref="listquery-item-detail"
              v-if="isShowDetail"
              @click="handleGoDetail(scope.$index, scope.row)"
              >停用</el-button
            >
            <el-button
              v-if="isShowEdit"
              size="mini"
              type="text"
              ref="listquery-edit-item"
              @click="handleGoEdit(scope.$index, scope.row)"
              >启用</el-button
            >
          </template>
          <template v-slot:header>
            <div class="ccui-multifunctional-table-wrapper-operation">
              <span>操作</span>
              <el-popover
                placement="right"
                popper-class="ccui-multifunctional-table-wrapper_setting__popover"
                trigger="click"
              >
                <el-checkbox
                  v-for="(e, i) in fixedTableThead"
                  :key="i"
                  :checked="e.checked"
                  disabled
                  class="ccui-popover-disabled"
                  >{{ e.label }}</el-checkbox
                >
                <div class="ccui-popover-line"></div>
                <draggable
                  :list="unfixedTableThead"
                  class="ccui-draggable"
                  @change="handleTableChange"
                >
                  <el-checkbox-group
                    v-for="(item, index) in unfixedTableThead"
                    v-model="item.checked"
                    :key="index"
                  >
                    <el-checkbox
                      :label="item"
                      :checked="item.checked"
                      :width="item.width"
                      :title="item.label"
                      @change="handleUpdate(item, index)"
                      >{{ item.label }}</el-checkbox
                    >
                  </el-checkbox-group>
                </draggable>
              </el-popover>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="新增分包专业" :visible.sync="dialogVisible" width="430px">
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="编码：" prop="roleName" :label-width="labelwidth">
          <el-input
            v-model="form.roleName"
            maxlength="20"
            style="width: 160px"
            placeholder="请输入编码"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="取值：" prop="roleDesc" :label-width="labelwidth">
          <el-input
            v-model="form.roleDesc"
            style="width: 260px"
            maxlength="100"
            placeholder="请输入取值"
            clearable
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          size="mini"
          type="default-mini"
          @click="dataAddHandler('close')"
          >取消</el-button
        >
        <el-button
          size="mini"
          type="primary-font-mini"
          @click="dataAddHandler('add')"
          >确定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import draggable from "vuedraggable";
export default {
  components: {
    draggable
  },
  data() {
    return {
      isFocus: 1,
      // 表格相关
      tableData: [], // 表格数据
      draggFlag: true,
      // 弹框表格
      selectRow: [],
      // 动态表格
      tableTheadOptions: [],
      tableName: this.tableList.listqueryList, // 表格命名
      tableThead: [], // 表格数据
      // 锁定表格
      fixedTableThead: [
        {
          label: "序号",
          prop: "id",
          width: "38",
          checked: true,
          fixed: true,
          type: "index",
          resizable: false
        }
      ],
      // 非锁定表格
      unfixedTableThead: [
        {
          label: "编码",
          prop: "userName",
          width: "62",
          checked: true
        },
        {
          label: "取值",
          prop: "sex",
          width: "60",
          checked: true,
          formatterName: "sexHandler"
        },
        {
          label: "状态",
          prop: "birthday",
          width: "120",
          checked: true
        }
      ],
      // 弹窗相关
      dialogVisible: false,
      labelwidth: "82px",
      // 新建角色弹框数据存储
      form: {
        roleName: "",
        roleDesc: ""
      },
      // 弹窗中input必填规则
      rules: {
        roleName: [
          { required: true, message: "请输入角色名称", trigger: "blur" }
        ],
        roleDesc: [{ required: true, message: "请输入***", trigger: "blur" }]
      }
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    // 新增打开弹框
    dataAddHandler(data) {
      console.log(data);
      if (data === "open") {
        this.dialogVisible = true;
      } else {
        this.dialogVisible = false;
      }
      // switch (data) {
      //   case "open":
      //     this.dialogVisible = true;
      //     break;
      //   case "close":
      //     this.dialogVisible = false;
      //     break;
      //   case "add":
      //     this.dialogVisible = false;
      //     break;
      // }
    },
    initData() {
      this.isShow = false;
      // this.getUserList();
      this.setTableWidth();
      this.renderTable();
      // this.isFist = false;
    },
    // 表格宽度更改存入
    tableTitleWidth(newWidth, oldWidth, column, event) {
      for (let i = 0; i < this.unfixedTableThead.length; i++) {
        if (this.unfixedTableThead[i].label === column.label) {
          this.unfixedTableThead[i].width = newWidth;
        }
      }
      this.tableThead = this.unfixedTableThead.concat(this.fixedTableThead);
      const comment = JSON.stringify(this.tableThead);
      localStorage.setItem(this.tableName, comment);
      this.tableTheadOptions = JSON.parse(localStorage.getItem(this.tableName));
      this.draggFlag = false;
      this.$nextTick(() => {
        this.draggFlag = true;
      });
    },
    // 根据返回状态显示不同的文字颜色
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (this.selectRow.includes(rowIndex)) {
        return { "background-color": "transparent" };
      }
    },
    rowClass({ row, rowIndex }) {
      if (this.selectRow.includes(rowIndex)) {
        return { "background-color": "rgba(255,232,195,1) " };
      }
    },
    // 渲染本地存储表格宽度
    setTableWidth() {
      const localTableData = JSON.parse(localStorage.getItem(this.tableName));
      if (localTableData) {
        for (let i = 0; i < this.tableTheadOptions.length; i++) {
          if (this.tableTheadOptions[i].label === localTableData[i].label) {
            this.tableTheadOptions[i].width = localTableData[i].width;
          }
        }
      }
    },
    // 默认渲染表格
    renderTable() {
      const localTableData = localStorage.getItem(this.tableName)
        ? JSON.parse(localStorage.getItem(this.tableName))
        : [];
      let unfixedTableThead = this.fixedTableThead.concat(
        this.unfixedTableThead
      );
      let localTableDataStr = localTableData.map(
        ({ label, prop, formatter, align }) =>
          JSON.stringify({ label, prop, formatter, align })
      );
      let unfixedTableTheadStr = unfixedTableThead.map(
        ({ label, prop, formatter, align }) =>
          JSON.stringify({ label, prop, formatter, align })
      );

      if (localTableData.length === unfixedTableThead.length) {
        let flag = localTableDataStr.every(item =>
          unfixedTableTheadStr.includes(item)
        );
        if (flag) {
          // 完全相同
          this.tableTheadOptions = localTableData;
          this.tableThead = localTableData;
          localTableData.forEach(item => {
            let index = this.unfixedTableThead.findIndex(
              cItem => item.prop === cItem.prop
            );
            index !== -1 &&
              (this.unfixedTableThead[index].checked = item.checked);
          });
        } else {
          // 长度相同但值不同
          this.tableThead = this.fixedTableThead.concat(this.unfixedTableThead);
          const comment = JSON.stringify(this.tableThead);
          localStorage.setItem(this.tableName, comment);
          const localTableData = JSON.parse(
            localStorage.getItem(this.tableName)
          );
          this.tableTheadOptions = localTableData;
        }
      } else {
        // 长度不同
        this.tableThead = this.fixedTableThead.concat(this.unfixedTableThead);
        const comment = JSON.stringify(this.tableThead);
        localStorage.setItem(this.tableName, comment);
        const localTableData = JSON.parse(localStorage.getItem(this.tableName));
        this.tableTheadOptions = localTableData;
      }
    },
    // 表格弹框拖拽触发
    handleTableChange(val) {
      this.tableThead = this.unfixedTableThead.concat(this.fixedTableThead);
      const comment = JSON.stringify(this.tableThead);
      localStorage.setItem(this.tableName, comment);
      const localTableData = JSON.parse(localStorage.getItem(this.tableName));
      this.tableTheadOptions = localTableData;
    }
  }
};
</script>

<style lang="scss">
.ccui-advanced-search-wrapper {
  margin-bottom: 15px;
}
</style>
